import React from 'react';
import { Card, Table, Tag, Button, Space, Breadcrumb } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './Filing.module.less';

interface FilingItem {
  id: string;
  name: string;
  code: string;
  status: 'uncompleted' | 'completed';
  startTime: string;
  endTime?: string;
  manager: string;
  filingStatus?: 'filed' | 'unfiled';
  filingTime?: string;
}

const Filing: React.FC = () => {
  const navigate = useNavigate();

  const columns = [
    {
      title: '项目名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '项目编号',
      dataIndex: 'code',
      key: 'code',
    },
    {
      title: '验收状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'completed' ? 'success' : 'default'}>
          {status === 'completed' ? '已完成' : '未完成'}
        </Tag>
      ),
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      key: 'startTime',
    },
    {
      title: '完成时间',
      dataIndex: 'endTime',
      key: 'endTime',
    },
    {
      title: '备案状态',
      dataIndex: 'filingStatus',
      key: 'filingStatus',
      render: (status?: 'filed' | 'unfiled') => {
        if (!status) return '-';
        return (
          <Tag color={status === 'filed' ? 'success' : 'default'}>
            {status === 'filed' ? '已备案' : '未备案'}
          </Tag>
        );
      },
    },
    {
      title: '备案时间',
      dataIndex: 'filingTime',
      key: 'filingTime',
      render: (time?: string) => time || '-',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: unknown, record: FilingItem) => (
        <Space>
          <Button 
            type="link" 
            onClick={() => navigate(`/summary/filing/detail/${record.id}`)}
          >
            查看详情
          </Button>
          {record.status === 'completed' && !record.filingStatus && (
            <Button
              type="link"
              onClick={() => navigate(`/summary/filing/detail/${record.id}`)}
            >
              提交备案
            </Button>
          )}
        </Space>
      ),
    },
  ];

  const data: FilingItem[] = [
    {
      id: '1',
      name: '示范区档案管理项目',
      code: 'PRJ001',
      status: 'completed',
      startTime: '2024-03-01',
      endTime: '2024-03-20',
      manager: '张三',
      filingStatus: 'filed',
      filingTime: '2024-03-25 14:30'
    },
    {
      id: '2',
      name: '数字档案馆建设项目',
      code: 'PRJ002',
      status: 'completed',
      startTime: '2024-03-10',
      endTime: '2024-03-28',
      manager: '李四'
    },
    {
      id: '4',
      name: '电子档案系统项目',
      code: 'PRJ004',
      status: 'completed',
      startTime: '2024-03-05',
      endTime: '2024-03-25',
      manager: '赵六'
    }
  ];

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: '总结备案',
          },
          {
            title: '结果备案',
          }
        ]} />
      </div>

      <Card title="结果备案" className={styles.filingCard}>
        <Table
          columns={columns}
          dataSource={data}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showTotal: total => `共 ${total} 条`,
            showQuickJumper: true,
            showSizeChanger: true
          }}
        />
      </Card>
    </MainLayout>
  );
};

export default Filing; 